<template>
    <div>
        <el-dialog :title="state.dialog.title" v-model="state.dialog.visible" width="1500px" append-to-body>
            <el-form ref="taskFormRef" :model="form" :rules="rules" label-width="80px">
              <el-row style="margin-bottom: 12px">
                <el-col :span="8">
                  <el-form-item label="任务主题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入任务主题" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="任务性质" prop="isBug">
                    <el-select v-model="form.isBug">
                      <el-option v-for="item in task_type" :key="item.value" :value="item.value"
                                 :label="item.label"/>
                    </el-select>
                  </el-form-item>

                </el-col>
                <el-col :span="8">
                  <el-form-item label="优先级" prop="priority">
                    <el-select v-model="form.priority">
                      <el-option v-for="item in work_priority" :key="item.value" :value="item.value"
                                 :label="item.label"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row style="margin-bottom: 12px">
                <el-col :span="4">
                  <el-form-item label="任务类型" prop="type">
                    <el-select v-model="form.type">
                      <el-option v-for="item in task_work_type" :key="item.value" :value="item.value"
                                 :label="item.label"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="工作类型" prop="cate">
                    <el-select v-model="form.cate">
                      <el-option v-for="item in task_type" :key="item.value" :value="item.value"
                                 :label="item.label"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预计结束时间" prop="cate" style="margin-left: 10px;">
                    <el-date-picker size="default" style="max-width: 250px;margin-left: -10px"
                                    v-model="form.endTime"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    type="date"
                                    start-placeholder="预计结束时间"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="预估工时" prop="planHours">
                    <el-input-number v-model="form.planHours" placeholder="请输入预估工时" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 12px">
                <el-col :span="4">
                  <el-form-item label="指派人员" prop="directorUid">
                    <el-select v-model="form.directorUid">
                      <el-option v-for="dict in state.userList"
                                 :key="dict.userId"
                                 :label="dict.nickName"
                                 :value="dict.userId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="协助人员" prop="assistAdminIds">
                    <el-select v-model="form.assistAdminIds">
                      <el-option v-for="dict in state.userList"
                                 :key="dict.userId"
                                 :label="dict.nickName"
                                 :value="dict.userId" />
                    </el-select>
                  </el-form-item>

                </el-col>
              </el-row>
              <el-row style="margin-bottom: 12px;">
                <el-form-item label="任务描述">
                  <el-input style="width: 1200px;"  type="textarea" v-model="form.content" rows="3" maxlength="200" show-word-limit/>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item label="markdown任务描述">
                  <mdEdit ref="editor" v-model="form.mdContent" mode="edit" />
                </el-form-item>
              </el-row>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button :loading="state.buttonLoading" :disabled ="state.buttonLoading" type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup name="TaskAdd" lang="ts">
    import {nextTick, reactive, ref, toRefs} from "vue";
    import { ElForm, ElMessage} from "element-plus";
    import { getTask, addTask, updateTask } from '@/leadmall/api/task';
    import { TaskVO, TaskForm } from '@/leadmall/api/task/types';
    import mdEdit from "@/components/mdEedit/index.vue";
    import { useUser } from "@/api/system/user";
    import {useDict} from "@/utils/dict";
    const { work_priority,task_type,task_work_type} = useDict("work_priority","task_type","task_work_type");
    const taskFormRef = ref(ElForm as any);
    const state = reactive({
        form: {} as any,
        rules:{},
        buttonLoading:false,
        dialog:{
            visible: false,
            title: ''
        },
      userList:[] as any
    });
    const {form ,rules} = toRefs(state);
    const emit = defineEmits(["refresh"]);
    /** 表单重置 */
    const reset = () => {
        form.value = Object.assign({},initFormData);
        taskFormRef.value = {};
    }

    const initDialog = (type: string,row?: TaskVO) => {
        useUser().getUserList({}).then((res: any) => {
          state.userList = res.data;
        });
        if(type==="add"){
            state.dialog.title = "添加服务";
            nextTick(() => {
                reset();
              Object.assign(form.value, row);
            });
        }else{
            state.dialog.title = "修改【请填写功能名称】";
            nextTick(async () => {
                reset();
                const _id = row?.id as number;
                const res = await getTask(_id);
                Object.assign(form.value, res.data);
            });
        }
    };
    const openDialog = async (type: string, row: TaskVO) => {
        initDialog(type, row);
        state.dialog.visible = true;
    };
    defineExpose({
        openDialog
    });
    const cancel = () => {
        state.dialog.visible = false;
        emit("refresh"); /* 刷新表格 */
    }
    /** 提交按钮 */
    const submitForm = () => {
        state.buttonLoading = true;
            taskFormRef.value.validate(async (valid: boolean) => {
            if (valid) {
                let res;
                let message;
                if (form.value.id) {
                    res = await updateTask(form.value)
                    message = "修改成功"
                } else {
                    res = await addTask(form.value)
                    message = "新增成功";
                }
                if (res.code === 200) {
                    ElMessage.success(message);
                    cancel();
                }else{
                    ElMessage.error(res.msg);
                }
            }
        });
        state.buttonLoading = false
    }
    const initFormData: TaskForm = {
                        id: undefined,
                        pid: undefined,
                        title: undefined,
                        projectId: undefined,
                        testId: undefined,
                        adminId: undefined,
                        planHours: undefined,
                        endTime: undefined,
                        overTime: undefined,
                        directorUid: undefined,
                        assistAdminIds: undefined,
                        cate: undefined,
                        type: undefined,
                        beforeTask: undefined,
                        isBug: undefined,
                        priority: undefined,
                        flowStatus: 1,
                        doneRatio: 0,
                        content: undefined,
                        mdContent: undefined,
                        deleteTime: undefined
    }
</script>
